<template>
    <div class="base-info">
        <div class="tip">分享接好运</div>
        <div class="form">
            <div class="form-item">
                <text class="label"><text class="required">*</text> 考试类型</text>
                <radio-group class="radios" @change="(e) => radioChange(e)">
                    <label class="radio-item" v-for="(item) in examTypeList" :key="item.value">
                        <radio 
                            :value="item.value" 
                            :checked="item.value === form.recallType" 
                            color="#FD453D" 
                            class="radio"
                        >
                        </radio>
                        <div class="radio-text">{{item.text}}</div>
                    </label>
                </radio-group>
            </div>
            <template v-if="examType == 'spoken'">
                <div class="form-item">
                    <text class="label"><text class="required">*</text> {{currentTypeObj.text}}日期</text>
                    <uni-datetime-picker
                        placeholder="考试日期"
                        :border="false"
                        type="date"
                        v-model="form.writeExamDate"  
                        :hasOkBtn="false"
                        :use-type="currentTypeObj.value"
                        :times="times"
                        @disabled="disabled"
                        @toggle-month="(time) => getTimes(time)"
                    >
                        <div class="right time-form">
                            <text class="default" v-show="!form.writeExamDate">请选择</text>
                            <text class="real" v-show="form.writeExamDate">{{form.writeExamDate}}</text>
                            <view class="iconfont icon-back"></view>
                        </div>
                    </uni-datetime-picker>
                </div>
                <div class="form-item" >
                    <text class="label"><text class="required">*</text> 口试日期</text>
                    <uni-datetime-picker
                        placeholder="考试日期"
                        :border="false"
                        type="date"
                        v-model="form.speakExamDate"  
                        :hasOkBtn="false"
                        :use-type="2"
                        @disabled="disabled"
                    >
                        <div class="right time-form">
                            <text class="default" v-show="!form.speakExamDate">请选择</text>
                            <text class="real" v-show="form.speakExamDate">{{form.speakExamDate}}</text>
                            <view class="iconfont icon-back"></view>
                        </div>
                    </uni-datetime-picker>
                </div>
            </template>
            <template v-else>
                <div class="form-item">
                    <text class="label"><text class="required">*</text> {{currentTypeObj.text}}日期</text>
                    <uni-datetime-picker
                        placeholder="考试日期"
                        :border="false"
                        type="date"
                        v-model="form.examDate"  
                        :hasOkBtn="false"
                        :use-type="currentTypeObj.value"
                        :times="times"
                        @disabled="disabled"
                        @toggle-month="(time) => getTimes(time)"
                    >
                        <div class="right time-form">
                            <text class="default" v-show="!form.examDate">请选择</text>
                            <text class="real" v-show="form.examDate">{{form.examDate}}</text>
                            <view class="iconfont icon-back"></view>
                        </div>
                    </uni-datetime-picker>
                </div>
            </template>
            <div class="form-item place" @click="selectCity">
                <text class="label"><text class="required">*</text> {{examType == 'spoken' ? '口试' : currentTypeObj.text}}考点</text>
                <div class="right">
                    <text class="default" v-show="!form.centerName">请选择</text>
                    <text class="real" v-show="form.centerName">{{form.centerName}}</text>
                    <view class="iconfont icon-back"></view>
                </div>
            </div>
            
        </div>
    </div>
</template>

<script>
    import { apiGetTimes } from '@/api/memory'
    export default {
        props: {
            modelValue: {
                type: Object,
                default: () => ({})
            },
            examType: { // 回忆类型 口语spoken，笔试write, 机试computer
                type: String,
                default: 'spoken'
            }
        },
        data(){
            return {
                examTypeList: [
                    {text: '笔试', value: '3'},
                    {text: '机考', value: '2'},
                ],
                form: { // 表单数据
                    recallType: '',
                    writeExamDate: '',
                    speakExamDate: '',
                    centerName: '',
                    school: {},
                    examDate: ''
                },
                currentTypeObj: {text: '笔试', value: '3'},
                
                times: [], // 固定考试日期的可用日期
                examMap: {
                    spoken: '笔试',
                    write: '笔试',
                    computer: '机考'
                }

            }
        },
        watch:{
            form: {
                deep: true,
                handler(val){
                    this.$emit('update:modelValue', this.form)
                }
            }
        },
        created() {
            this.getTimes()
        },
        mounted() {
            if(this.examType == 'computer'){
                this.form.recallType = '2'
            }else {
                this.form.recallType = '3'
            }
            this.currentTypeObj = this.examTypeList.find(i => i.value == this.form.recallType)
        },
        methods: {
            radioChange(e){
                this.form.recallType = e.detail.value
                this.currentTypeObj = this.examTypeList.find(i => i.value == this.form.recallType)
                this.form.writeExamDate = ''
                this.form.examDate = ''
            },
            disabled(){
                this.$tip.toast('请选择考试日期')
            },
            // 必填项校验
            validate(){
                let errorText = {
                    centerName: `请选择${this.examType == 'spoken' ? '口试' : this.currentTypeObj.text}考点`,
                }
                if(this.examType == 'spoken'){
                    errorText = {
                        writeExamDate: `请选择${this.currentTypeObj.text}日期`,
                        speakExamDate: '请选择口试日期',
                        ...errorText,
                    }
                }else {
                    errorText = {
                        examDate: `请选择${this.currentTypeObj.text}日期`,
                        ...errorText
                    }
                }
                let pass = true
                for (const errKey in errorText) { // foreach不能终止，遇到第一个校验不通过就终止
                    if(!this.form[errKey]){
                        this.$tip.toast(errorText[errKey])
                        pass = false
                        return
                    }
                }
                return pass
            },

            // 组件没有onshow，利用父组件的onshow模拟子组件的onshow状态
            show(){
                try {
                    const obj = uni.getStorageSync('select-school') || {}
                    this.form.centerName = obj.schoolName || obj.cityName || ''
                    this.form.school = obj
                } catch (e) {
                    console.log(e, 'err')
                }
            },
            selectCity(){
                uni.navigateTo({
                    url: `/pages/memory/add/pages/select-place`
                })
            },
            // 获取笔试可考日期
            getTimes(time){
                apiGetTimes({date: time || ''}).then(res => {
                    if(res.code == 200){
                        this.times = res.data
                    }
                }).catch(err => {
                    console.log(err, 'err')
                })
            }
        }
    }
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
    @function toRem($rpx){  //$rpx为需要转换的字号
        @return #{$rpx * 100 / 750 / 4}rem; 
    }
    .base-info{
        background-color: #F6F8FC;
        padding: toRem(70) toRem(30) 0;
        box-sizing: border-box;
    }
    .tip{
        margin-bottom: toRem(40);
        color: #191A1A;
        font-size: toRem(40);
        font-weight: 500;
    }
    .form{
        .form-item{
            display: flex;
            align-items: center;
            background-color: #fff;
            border-radius: toRem(10);
            width: 100%;
            justify-content: space-between;
            padding: toRem(30);
            box-sizing: border-box;
            margin-bottom: toRem(30);
            .label{
                display: inline-flex;
                align-items: center;
                color: #333;
                font-size: toRem(28);
                .required{
                    color: #FD453D;
                    margin-right: toRem(8);
                }
            }
            .radios{
                display: inline-flex;
                align-items: center;
                font-size: toRem(24);
                color: #999;
                flex: 1;
                justify-content: flex-end;
                line-height: toRem(24);
                .radio-item{
                    display: flex;
                    align-items: center;
                }
                .radio{
                    transform: scale(.6);
                }
                &>div{
                    margin-left: toRem(40);
                }
            }
            .right{
                color: #999;
                font-size: toRem(24);
                display: inline-flex;
                align-items: center;
                .iconfont{
                    transform: rotate(180deg);
                    margin-left: toRem(20);
                }
            }
            .real{
                color: #333;
            }
            .time-form{
                width: 100%;
                justify-content: flex-end;
            }
            &:last-child{
                margin-bottom: 0;
            }
        }
        .place{
            .right{
                flex: 1;
                min-width: 0;
                justify-content: flex-end;
                margin-left: toRem(20);
                .real{
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
            }
        }
    }
 
</style>
